<template>
  <table>
    <thead>
      <th>序号</th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </thead>
    <tbody>
      <tr v-for="(item,i) in books">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.date }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="()=>{
            if(item.count>0){
              item.count--
            }else{
              item.count=0
            }
          }">-</button>
          <span class="counter">{{ item.count }}</span>
          <button @click="()=>{item.count++}">+</button>
        </td>
        <td>
          <button @click="delete_(item.id)">移除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <h2>总价格: {{ total }}</h2>
</template>

<script setup>
import {reactive,computed,watch,ref} from 'vue'

const delete_=(id)=>{
  let index=-1
  for(let i=0;i<books.length;i++){
    if(books[i].id===id){
      index=i
      break
    }
  }
  books.splice(index,1)
}

const total = computed(()=>{
  let sum=0
  for(let i=0;i<books.length;i++){
    sum+=books[i].price*books[i].count
  }
  return sum
})

const books = reactive([
  {
    id: 1,
    name: '《算法导论》',
    date: '2006-9',
    price: 85.00,
    count: 1
  },
  {
    id: 2,
    name: '《UNIX编程艺术》',
    date: '2006-2',
    price: 59.00,
    count: 1
  },
  {
    id: 3,
    name: '《编程珠玑》',
    date: '2008-10',
    price: 39.00,
    count: 1
  },
  {
    id: 4,
    name: '《代码大全》',
    date: '2006-3',
    price: 128.00,
    count: 1
  },
])
</script>

<style lang="css" scoped>
table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

.counter {
  margin: 0 5px;
}
</style>